<template>
  <t-tabs v-model="tabValue">
    <t-tab-panel value="1" label="基本信息">
      <t-form ref="form" label-align="top" :colon="true" class="step-form" :data="data" labelWidth="120px">
        <t-row style="flex: 1">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="基本信息">
              <t-form labelWidth="100px">
                <t-form-item label="项目编号：" name="projectNum">
                  {{ projectData.projectNum || '暂未分配' }}
                </t-form-item>
                <t-form-item label="验收编号：" name="projectNum">
                  {{ data.ideaNum || '暂未分配' }}
                </t-form-item>
                <t-form-item label="项目名称：" name="projectName">
                  {{ projectName }}
                </t-form-item>
              </t-form>
            </t-card>
          </t-col>
        </t-row>
        <t-row style="flex: 1">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="简要技术说明及主要技术性能指标">
              <!--              <div v-html="data.briefDescription"></div>-->
              <inner-html :content="data.briefDescription"></inner-html>

            </t-card>
          </t-col>
        </t-row>
        <t-row style="flex: 1">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="推广应用前景与措施">
              <!--              <div v-html="data.applicationProspect"></div>-->
              <inner-html :content="data.applicationProspect"></inner-html>

            </t-card>
          </t-col>
        </t-row>
        <t-row style="flex: 1">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="主要技术文件目录及来源">
              <!--              <div v-html="data.technicalDocument"></div>-->
              <inner-html :content="data.technicalDocument"></inner-html>

            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel value="2" label="单位信息">
      <project-unit :close-op="true" ref="project-unit" v-model="data.projectCompanyList" :adviceFunding="adviceFunding"
        :projectId="objId" :editOpen="false" phaseType="4"></project-unit>
    </t-tab-panel>
    <t-tab-panel value="3" label="研究人员">
      <project-member ref="project-member" :close-op="true" v-model="data.projectMemberList" :projectId="objId"
        :editOpen="false" phaseType="4"></project-member>
    </t-tab-panel>
    <t-tab-panel value="4" v-if="!reviewOpen" label="附件">
      <t-card v-if="isMyProject" class="step-card" size="small" title="项目成果(提交验收意见书前，请先提交成果)">
        <project-achievement :objId="objId"></project-achievement>
      </t-card>
      <t-card class="step-card" size="small" title="验收意见书">
        <t-table size="small" row-key="id" :columns="projectFileColumns" :data="projectFileData3">
          <template #files="{ row }">
            <file-upload v-if="isMyProject && row.moduleKey === 'projectYSPSZJF'" @success="uploadSuccess"
              v-model="row.fileIds" :moduleKey="row.moduleKey" :fileList="row.fileLists" :multiple="true">
              <t-button variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
            <file-upload
              v-else-if="isMyProject && (row.moduleKey === 'projectYSSJS' && projectData.projectStatus === '32')"
              @success="uploadSuccessByYJS" v-model="row.fileIds" :moduleKey="row.moduleKey" :fileList="row.fileLists"
              accept="application/pdf" tips="限制pdf">
              <t-button variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
            <a v-else class="t-button-link" target="_blank" v-for="(item, index) in row.fileLists" :href="item.url"
              :key="index">
              {{ item.name }}
            </a>
          </template>
          <!-- <template #op="{row}">
                    <t-button :loading="yjsLoading"  v-if="projectData.projectStatus==='32' && isMyProject && row.moduleKey === 'projectYSSJS'" @click="onYJS(row)" size="small" variant="text"
                              class="t-button-link">
                      <t-icon name="edit-1" slot="icon"/>
                      提交验收意见书
                    </t-button>
                  </template> -->
          <template #c1="{ row }">
            <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
            <div v-else>{{ row.c1 }}</div>
          </template>
        </t-table>
      </t-card>
    </t-tab-panel>
    <t-tab-panel value="5" label="评审组信息">
      <expert-account-detail :projectName="header" :createUserId="row.createUserId"
        :objId="objId"></expert-account-detail>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import projectUnit from "../../pm/components/project-unit.vue";
import projectMember from "../../pm/components/project-member.vue";
import projectAchievement from "../../achievement/components/project-achievement.vue";
import { getFiles } from "@/api/common";
import FileUpload from "@/components/FileUpload/index.vue"
import InnerHtml from "@/components/InnerHtml/index.vue";

const ExpertAccountDetail = () => import('@/pages/kjxm/apply/components/expert-account-detail.vue');

export default {
  name: "acceptance-option-detail",
  components: {
    projectUnit,
    projectMember,
    projectAchievement,
    FileUpload,
    InnerHtml,
    ExpertAccountDetail
  },
  props: {
    header: String,
    objId: [String, Number],
    row: Object,
    acceptanceId: [String, Number],
    tabDefaultValue: {
      type: String,
      default: '1'
    },
    projectName: {
      type: String,
      default: ''
    },
    reviewOpen: {
      type: Boolean,
      default: false
    },
    onlyShowAssignFile: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      tabValue: this.tabDefaultValue,
      isMyProject: false,
      adviceFunding: 0,
      yjsLoading: false,
      projectData: {},
      data: {
        projectCompanyList: [],
        projectMemberList: [],
        briefDescription: '',
        applicationProspect: '',
        technicalDocument: '',
      },
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "files",
          title: "附件列表",
          align: "left",
        },
      ],
      // projectFileColumns2: [
      //   {
      //     colKey: "id",
      //     title: "序号",
      //     align: "center",
      //     width: 64
      //   },
      //   {
      //     colKey: "c1",
      //     title: "附件名称",
      //     align: "center",
      //   },
      //   {
      //     colKey: "c2",
      //     title: "是否必需",
      //     align: "center",
      //   },
      //   {
      //     colKey: "files",
      //     title: "附件列表",
      //     align: "left",
      //   },
      //   {
      //     colKey: "op",
      //     title: "操作",
      //     align: "center",
      //   },
      // ],
      projectFileData3: [
        {
          id: 1,
          c1: '验收意见书',
          c2: "验收意见书审批通过之后，走完盖章流程后上传。",
          moduleKey: "projectYSSJS",
          fileIds: [],
          fileLists: [],
          require: true,
        },
        // {
        //   id: 2,
        //   c1: '验收评审专家费用转账凭证',
        //   c2: "验收评审会议后上传",
        //   moduleKey: "projectYSPSZJF",
        //   fileIds: [],
        //   fileLists: [],
        //   require: true,
        // },
      ],
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods: {
    getObj () {
      this.$api.kjxm.project.get(this.objId).then(pro => {
        this.projectData = pro.data;
        if (pro.data.createUserId === Number(this.$store.state.user.userId)) {
          this.isMyProject = true;
        }
      }).catch((e) => {
        this.$message.error(e.toString());
      });
      this.$api.kjxm.acceptance.opinionGetAll(this.objId).then(response => {
        if (response.data) {
          this.data = response.data;
        }
      }).catch((e) => {
        this.$message.error(e.toString());
      });
      if (this.onlyShowAssignFile) {
        this.projectFileData3 = [{ ...this.projectFileData3[1], id: 1 }]
      } else {
        getFiles(this.acceptanceId).then((res) => {
          const files = {}
          res.data.forEach((item) => {
            if (!files[item.moduleKey]) {
              files[item.moduleKey] = []
            }
            files[item.moduleKey].push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath
            })
          })
          this.projectFileData3[0].fileLists = files.projectYSSJS || [];
          this.projectFileData3[0].fileIds = files.projectYSSJS?.map(val => val.id) || [];
        });
      }
      getFiles(this.objId).then((res) => {
        const files = {}
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        this.projectFileData3[this.onlyShowAssignFile ? 0 : 1].fileLists = files.projectYSPSZJF || [];
        this.projectFileData3[this.onlyShowAssignFile ? 0 : 1].fileIds = files.projectYSPSZJF?.map(val => val.id) || [];
      });

    },
    uploadSuccessByYJS (ids) {
      const confirmDia = this.$dialog.confirm({
        header: "系统提示",
        body: `是否确认提交盖章后的验收意见书,提交后无法修改!`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          this.$api.kjxm.acceptance.submitYsFile({
            id: this.acceptanceId,
            sysAttMainVo: {
              sysAttMainIds: ids,
            }
          }).then(pro => {
            this.$message.success('提交成功');
            this.getObj()
            confirmDia.destroy();
          }).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });

        },
        onCancel: ({ e }) => {
          this.projectFileData3[0].fileLists = []
          this.projectFileData3[0].fileIds = []
        },
      })
    },
    uploadSuccess (ids) {
      this.$api.kjxm.project.edit({
        id: this.objId,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

.t-form__item {
  margin-bottom: 6px
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
  padding-bottom: 14px;
}
</style>
